<template>
  <div class="cont"><van-nav-bar
  title="商品详情页"
  left-text="返回"
 
  left-arrow
  @click-left="$router.go(-1)"
/>

 <div class="box">
      <h2>{{ product.shop }}</h2>
      <van-image width="100%" :src="product.picture" />
    <p>价格:<span>￥{{ product.price }}</span></p>
    </div>
    <van-button type="primary" @click="onAddCart">加入购物</van-button>
    <van-button type="info" @click="onLookCart">查看购物</van-button>

</div>
</template>

<script>
import { requestproducdetail } from '@/api/product'
export default {
  data(){
    return{
      product:{}
    };
  },
  async created(){
    let id =this.$route.query.id
    console.log(id);
    let res= await requestproducdetail(id);
    let data=res.data;
   let { resultCode, resultInfo } = data;
   if(resultCode==1){
    this.product=resultInfo
    console.log('this.product',this.product);
   }
  },

  methods: {
    //查看购物车
  onLookCart(){
   this.$router.push({path:'/shopping'})
  },
  //添加购物车
 onAddCart(){
  let product=this.product
  console.log("product",product);
  let cartList=this.$store.getters.cartList;
  console.log('VuexcartList',cartList);
  let oldproduct=cartList.find((item)=>item.id==product.id)
  console.log('oldproduct',oldproduct);
  if(oldproduct){ 
    oldproduct.num++
  }else{
cartList.push({
  id:product.id,
  url:product.picture,
  name:product.shop,
  num:1,
  oldprice:product.oldprice,
  price:product.price,
  state:false
});
  }
this.$dialog.alert({
      message: '添加成功',
    });
  }
  },
};
</script>

<style>
.cont{
  height: 2000px;
}
.box h2{
  text-align: center;
}
.box p{
  float: right;
}
.box span{
  color: red;
}
</style>